<html>

<head>
    <title>地图预览</title>
</head>

<body>
    <div id="map"></div>
</body>
<script>
    let data = location.search.split('?')[1].split('&');
    let lng = data[0].split('=')[1];
    let lat = data[1].split('=')[1];
    let key = data[2].split('=')[1];
    let marker = null



    /**
     * 加载渲染地图
     */
    function loadingMap(TMap) {
        //定义地图中心点坐标
        let center = new TMap.LatLng(parseFloat(lat), parseFloat(lng))
            //定义map变量，调用 TMap.Map() 构造函数创建地图
        const mapInstance = new TMap.Map(document.getElementById('map'), {
            center: center, //设置地图中心点坐标
            zoom: 16, //设置地图缩放级别
        });

        /**
         * 地图加载完成事件
         */
        mapInstance.on("tilesloaded", () => {
            setTimeout(() => {
                const point = new TMap.LatLng(lat, lng)

                //设置中心的点
                mapInstance.setCenter(point)
                    //设置缩放等级

                //清除之前的点标记
                if (marker) {
                    marker.setMap(null)
                    marker = null
                }

                //重新创建点标记
                marker = new TMap.MultiMarker({
                    map: mapInstance,
                    geometries: [{
                        position: point
                    }]
                })
            }, 100)
        });
    }



    window.onload = function() {

        //JS加载初始化完成
        window.TMap = {
            "__load": function(onLoad) {
                onLoad({
                    "key": key,
                    "version": "1.6.5.0",
                    "highQualityRender": false
                }, (new Date()).getTime());
                delete TMap.__load;
                setTimeout(() => {
                    loadingMap(window.TMap)
                }, 400)
            }
        }


        //加载JS
        const scriptElement = document.createElement('script');
        scriptElement.type = 'text/javascript';
        scriptElement.src = `//map.qq.com/api/gljs?v=1.exp&libraries=service&key=${key}`;
        document.body.appendChild(scriptElement);

    }
</script>

</html>